<template>
    <div class="">
        <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
            <span> <el-form ref="ruleFormRef" :rules="rules" :model="addForm" :inline="true" label-width="auto"
                    class="demo-form-inline">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="addForm.username" placeholder="请输入关键字" />
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input v-model="addForm.pass" placeholder="请输入关键字" />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="pass">
                        <el-input v-model="addForm.pass" placeholder="请输入关键字" />
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="addForm.name" placeholder="请输入关键字" />
                    </el-form-item>

                    <el-form-item label="联系方式" prop="tel">
                        <el-input v-model="addForm.tel" placeholder="请输入关键字" />
                    </el-form-item>

                    <el-form-item label="角色" prop="typeid">
                        <el-select v-model="addForm.typeid" placeholder="选角色" size="large" style="width: 240px">
                            <el-option v-for="item in typeList" :key="item.id" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>

                </el-form></span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="submit">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang='ts' setup>
import { ref, watch, reactive, onMounted } from "vue"
import { addtype } from '../service/administrator/type'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { administratoradd, administratorrolelist } from '../service/administrator/administrator'
const dialogVisible = ref(true)
const emit = defineEmits(['close', 'add'])

const addForm = reactive<addtype>({
    id: 0,
    name: '',
    pass: '',
    tel: '',
    typeid: null,
    username: ''
})
const handleClose = () => {
    dialogVisible.value = false
    emit('close', [])
}
const props = defineProps({
    inner: {
        type: [Object],
        default: () => ({})
    }
})

type tpType={
    id:number,
    name:string
} 
const typeList = ref<tpType[]>([])
const getadministratorrolelist = async () => {
    let res: any = await administratorrolelist()
    console.log(res);
    
    typeList.value = res.data.list
}
const submit = () => {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            adding()
            emit('add', [])
        }
    })
}

const adding = async () => {
    let res: any = await administratoradd(addForm)
    if (res.errCode === 10000) {
        emit('add', [])
    }
}

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<addtype>>({
    id: [
        { required: true, message: '请输入id', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '请输入name', trigger: 'blur' },
    ],
    pass: [
        { required: true, message: '请输入 pass', trigger: 'blur' },
    ],
    tel: [
        { required: true, message: '请输入 tel', trigger: 'blur' },
    ],
    typeid: [
        { required: true, message: '请输入 typeid', trigger: 'blur' },
    ],
    username: [
        { required: true, message: '请输入 username', trigger: 'blur' },
    ],
})

onMounted(() => {
    getadministratorrolelist()
    addForm.id= props.inner.id
    addForm.name= props.inner.name
    addForm.pass= props.inner.pass
    addForm.tel= props.inner.tel
    addForm.typeid= props.inner.typeid
    addForm.username= props.inner.username
})
</script>

<style scoped></style>
